<template>
  <div>
        <van-nav-bar
  title="提交请假登记"
  left-text="返回"
  left-arrow
  @click-left="router.back()"
/>
    <div class="round_box">
        <div class="round">
            <div class="box" @click="handleClick">
                <div v-show="workS">点击签到</div>
                <div v-show="!workS">已签到</div>
                <div>{{dayJsTime}}</div>
            </div>
        </div>
    </div>
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <th>打卡人</th>
                <th>打卡时间</th>
                <th>签到状态</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in workList.list" :key="index">
                    <td>{{item.nickName}}</td>
                    <td>{{item.attendanceTime}}</td>
                    <td style="color:green">已签到</td>
                </tr>
            </tbody>
        </table>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import dayjs from 'dayjs'
import {useRouter} from 'vue-router'
import {attend,getInfo,attendlist} from '@/model/until'
import userFlag from '@/hooks/unti'
import userFlags from '@/hooks/un'
userFlag()
let router = useRouter()
let useId = ref('')
let dayJsTime = ref('')
let workS = ref(true)
let zhuangtai = reactive({
    info:{}
})
let workList = reactive({
    list:[]
})
onMounted(async ()=>{
    zhuangtai.info = JSON.parse(window.localStorage.getItem('worktime'))
    if(zhuangtai.info){
        if(zhuangtai.info.iswork === undefined){
            workS.value = true
        }else{
            workS.value = false
        }
    }
        dayJsTime.value = dayjs(`${new Date()}`).format('YYYY-MM-DD HH:mm:ss')
    setInterval(() => {
        dayJsTime.value = dayjs(`${new Date()}`).format('YYYY-MM-DD HH:mm:ss')
    }, 1000);
      await  getInfo({},{ Authorization: window.localStorage.getItem("token") })
      .then(res => {
            useId.value = res.data.user.userId
            console.log(useId.value);
        });
      await attendlist({},{Authorization:window.localStorage.getItem('token')})
      .then(res=>{
             workList.list = res.data.rows.filter(item=>item.userId==useId.value).reverse()
            //  zhuangtai.info = JSON.parse(window.localStorage.getItem('worktime'))
         })
})
let handleClick =async ()=>{
    // let days = dayJsTime.value.split(" ")
    // // console.log(days);
    console.log(workS.value)
    if(workS.value == true){
        await attend({
             attendanceTime:dayJsTime.value,
         },{Authorization:window.localStorage.getItem('token')}).then(res=>{
             window.localStorage.setItem('worktime',JSON.stringify({
                 iswork: false,
                 worktime: dayJsTime.value,
             }))
             workS.value = false
         })
         await attendlist({},{
             Authorization:window.localStorage.getItem('token')
         }).then(res=>{
             workList.list = res.data.rows.filter(item=>item.userId==useId.value).reverse()
             zhuangtai.info = JSON.parse(window.localStorage.getItem('worktime'))
         })
    }
}
userFlags()
</script>

<style lang="scss" scoped>
.round_box{
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
.round{
    width: 200px;
    height: 200px;
    border-radius:50%;
    background: skyblue;
    display: flex;
    align-items: center;
    justify-content: center;
    .box{
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
    justify-content: center;
    div{
        width: 100%;
    }
    }
}
}
table{
    width: 100%;
    text-align: center;
    th,td{
        border: 1px solid black;
    }
}
</style>